<!--
 * @Description: 
 * @Author: Xiaochuan-W
 * @Date: 2023-10-09 15:37:15
 * @LastEditors: Xiaochuan-W
 * @LastEditTime: 2023-10-31 16:40:40
-->
<template>
	<XConfigProvider>

		<div class="x-container">
			<div v-if="!hideTree" class="x-tree-box">
				<div class="x-title">{{ title[0] || '组织架构' }}</div>
				<div class="x-scroll-box">
					<XTree
						:tree-data="treeData"
						:tree-props="treeProps"
						:lazy="lazy"
						:load="load"
						@node-click="(node:Record<string,any>) => emit('node-click', node)"
					></XTree>
				</div>
			</div>
			<div class="x-user-box">
				<div class="x-title">
					{{ title[1] || '用户列表' }}
					<el-input
						v-model="keywords"
						style="width: calc(100% - 70px)"
						placeholder="请输入名称查询"
						:suffix-icon="Search"
					/>
				</div>
				<ul class="x-scroll-box">
					<template v-for="(item, index) in listData" :key="index">
						<li
							v-if="showItem(item)"
							:class="{ active: hasItemFunc(item) }"
							@click="selectItem(item)"
						>
							{{ item[listProps.label] }}
						</li>
					</template>
				</ul>
			</div>
			<div class="x-user-selected-box">
				<div class="x-title">{{ title[2] || '已选择项' }}</div>
				<ul class="x-scroll-box">
					<li v-for="(item, index) in selectList" :key="index">
						{{ item[listProps.label] }}
						<el-icon class="x-close-icon" :size="16" @click="deleteItem(item)">
							<Close />
						</el-icon>
					</li>
				</ul>
			</div>
		</div>
	</XConfigProvider>
</template>

<script setup lang="ts">
import XConfigProvider from '../XConfigProvider/index.vue'
import XTree from '../XTree'
import {ref,watch} from 'vue'
import {ElInput,ElIcon} from 'element-plus'
import { Close, Search } from '@element-plus/icons-vue';

const emit = defineEmits(['node-click', 'update:modelValue']);
const props = defineProps({
	modelValue: {
		type: Array as any,
		default: () => []
	},
	title: {
		type: Array,
		default: () => ['组织架构', '用户列表', '已选择项']
	},
	hideTree: {
		type: Boolean,
		default: () => false
	},
	treeData: {
		type: Array,
		default: () => []
	},
	treeProps: {
		type: Object,
		default: () => ({})
	},
	lazy: {
		type: Boolean,
		default: () => true
	},
	load: {
		type: Function as any,
		default: () => () => {}
	},
	listData: {
		type: Array as any,
		default: () => []
	},
	listProps: {
		type: Object,
		default: () => ({ label: 'name', value: 'id' })
	},
	multiple: {
		type: Boolean,
		default: () => false
	}
});
const selectList = ref<any[]>(props.modelValue);
function selectItem(item: any) {
	if (props.multiple) {
		// 多选
		const hasItem = hasItemFunc(item);
		!hasItem && selectList.value.push(item);
	} else {
		// 单选
		selectList.value = [item];
	}
	emit('update:modelValue', selectList.value);
}
function hasItemFunc(item: any) {
	return selectList.value.find(
		(val: any) => val[props.listProps.value] === item[props.listProps.value]
	);
}
function deleteItem(item: any) {
	selectList.value = selectList.value.filter(
		(val: any) => val[props.listProps.value] !== item[props.listProps.value]
	);
	emit('update:modelValue', selectList.value);
}

const keywords = ref('');
function showItem(item: any) {
	return item[props.listProps.label].includes(keywords.value);
}
watch(
	() => props.modelValue,
	() => {
		selectList.value = props.modelValue;
	}
);
</script>

<style lang="scss" scoped>
* {
	box-sizing: border-box;
}
.x-container {
	height: 500px;
	overflow: hidden;
	display: flex;
	border: 1px solid #dcdfe6;
	background: #fff;
	.x-title {
		height: 54px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 20px;
	}
	.x-scroll-box {
		height: 446px;
		overflow-y: auto;
		padding: 0 20px;
		li {
			list-style: none;
			height: 30px;
			background: #f6f7fc;
			border-radius: 15px;
			font-size: 14px;
			text-align: left;
			line-height: 30px;
			margin-top: 10px;
			padding: 0 15px;
			cursor: pointer;
			position: relative;
			.x-close-icon {
				position: absolute;
				right: 6px;
				top: 7px;
				color: #bbb;
			}
		}
		.active {
			background: transparent;
			border: 1px solid #3d6cfe;
			color: #3d6cfe;
		}
	}
	.x-tree-box {
		width: 36%;
		border-right: 1px solid #dcdfe6;
	}
	.x-user-box {
		width: 32%;
		border-right: 1px solid #dcdfe6;
	}
	.x-user-selected-box {
		width: 32%;
	}
}
</style>
